
<style lang="less" scoped>
.notific-ation {
  position: fixed;
  padding: 0.25rem 0.5rem;
  z-index: 999;
  top: 50%;
  left: 50%;
  transition: all .18s cubic-bezier(0.65, 0.05, 0.36, 1);
  background: rgba(0,0,0,0.75);
  font-size: 1rem;
  color: #ffffff;
}
.window-notific {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  padding: 6rem 0rem;
  transition: all .18s cubic-bezier(0.65, 0.05, 0.36, 1);
  background: rgba(0,0,0,0.65);
  color: #ffffff;
}
.alert-1 {
  width: 20rem;
  height: 24rem;
  padding-top: 12rem;
  background-image: url('~assets/alert-bg.png');
  background-position: top;
  background-size: 100% 100%;

  .content {
    
  }
}
.alert-2 {
  width: 20rem;
  height: 24rem;
  padding-top: 12rem;
  background-image: url('~assets/login-err.png');
  background-position: top;
  background-size: 100% 100%;

  .content {
    
  }
}
</style>
<template>
  <div>
    <div v-if="domHide && windowType === 'one'" :style="{transform: `translate(-50%, -50%) scale(${show ? '1':'0'})`}" class="notific-ation">{{content}}</div>
    <div v-if="domHide && windowType === 'window' || windowType === 'phoneErr'" :style="{transform: `translate(-50%, -50%) scale(${show ? '1':'0'})`}" class="window-notific d-flex-row d-flex-center">
      <div v-if="windowType === 'window'" class="alert-1 color-0-85 d-flex-column align-items-center ">
        <div class="d-flex-column align-items-center ">
          <p style="font-size: 1.3rem;">提交成功</p>
          <p style="font-size: 1rem; color: #999;">您已提交成功!</p>
        </div>
        <div @click="hiedeDom" class="w-100" style="padding: 3rem 4.5rem 0rem 4.5rem;">
          <div class="max-button">继续打分</div>
        </div>
      </div>
      <div v-if="windowType === 'phoneErr'" class="alert-2 color-0-85 d-flex-column align-items-center ">
        <div class="d-flex-column align-items-center ">
          <p style="font-size: 1.3rem;">登录失败</p>
          <p style="font-size: 1rem; color: #999;">非内部人员!</p>
          <p style="font-size: 1rem; color: #999;">请使用正确手机号</p>
        </div>
        <div @click="hiedeDom" class="w-100" style="padding: 3rem 4.5rem 0rem 4.5rem;">
          <div class="max-button">重新登陆</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'notific-ation',
  props:{
    content: {
      type: String,
    },
    domHide: {
      type: Boolean,
      default: true
    },
    windowType: {
      type: String,
      default: 'one' // value: one | window | phoneErr
    }
  },
  data() {
    return {
      show: true,
    }
  },
  created() {
    if( this.windowType === 'window' || this.windowType === 'phoneErr') {
      
    } else {
      this.timeHeideDom()
    }
    
  },
  methods: {
    hiedeDom() {
      this.show = false
      setTimeout(() => {
        this.domHide = false
      }, 210)
    },
    timeHeideDom() {
      setTimeout(()=>{
        this.show = false
        setTimeout(() => {
          this.domHide = false
        }, 210)
      }, 1500)
    }
  }
}
</script>